<template>
  <el-breadcrumb separator="/">
    <el-breadcrumb-item :to="{ path: '/layout' }">首页</el-breadcrumb-item>
      <transition-group name="breadcrumb">
        <el-breadcrumb-item v-for="(item) of breadcrumbList" :key="item.path">
          <span>{{ item.meta.title }}</span>
        </el-breadcrumb-item>
      </transition-group>
  </el-breadcrumb>
</template>

<script>
export default {
  data() {
    return {
      breadcrumbList: []
    }
  },
  watch: {
    $route(route) {
      this.getBreadcrumb()
    }
  },
  mounted() {
    this.getBreadcrumb()
  },
  methods: {
    getBreadcrumb() {
      let matched = this.$route.matched.filter(item => item.meta && item.meta.title)
      this.breadcrumbList = matched.filter(item => item.meta && item.meta.title !== '首页' && item.meta.breadcrumb !== false)
    }
  }
}
</script>

<style lang="stylus" scoped>
  .breadcrumb-enter-active,
  .breadcrumb-leave-active
    transition all 1s

  .breadcrumb-enter,
  .breadcrumb-leave-active
    opacity 0
    transform translateX(-10px)

  .breadcrumb-move
    transition all .5s

  .breadcrumb-leave-active
    position absolute

  .el-breadcrumb
    line-height 60px
    float left
</style>
